<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="/login/JD_sass/JD1.css"/>
    <script src="/login/JD_js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>gulimall</title>
</head>
<body>
<div id="app">
    <!--顶部logo-->
    <header>
        <a href="http://gulimall.com"><img src="/login/JD_img/logo.jpg"/></a>
        <p>欢迎登录</p>
        <div class="top-1">
            <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_06.png"/><span>登录页面,调查问卷</span>
        </div>
    </header>

    <div class="top-2">
        <div class="top-2a">
            <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_11.png"/>
            <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<span>谷粒商城隐私政策</span>》已上线，将更有利于保护您的个人隐私。</p>
        </div>
    </div>

    <!--大图-->
    <div class="top-3">
        <div class="img_1">
            <img src="/login/JD_img/5731485aN1134b4f0.png"/>
        </div>
        <div id="sign">
            <div class="si_top">
                <p>
                    <span>谷粒商城不会以任何理由要求您转账汇款，谨防诈骗。</span>
                </p>
            </div>
            <div class="si_cen">
                <h2 class="btn1" :class="{act: show==true}" @click="show = !show">扫码登录</h2>
                <span>|</span>
                <h2 class="btn1" :class="{act: show!=true}" @click="show = !show">账户登录</h2>
            </div>
            <div class="si_bom tab" v-show="show">
                <img src="/login/JD_img/show.png" class="bom_1"/>
                <a href="/login/#"><img src="/login/JD_img/phone-orange.png" class="bom_2"/></a>
                <h6>打开<span class="red">手机谷粒商城</span> 扫描二维码</h6>
                <p>
                    <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_15.png"/>
                    <span><a href="/login/#">免输入</a></span>
                    <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_17.png"/>
                    <span><a href="/login/#">更快</a></span>
                    <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_19.png"/>
                    <span><a href="/login/#">更安全</a></span>
                </p>
            </div>
            <div class="si_bom1 tab" v-show="!show">
                <div class="error">
                    <div></div>
                    请输入账户名和密码
                </div>
                <ul>
                    <li class="top_1">
                        <img src="/login/JD_img/user_03.png" class="err_img1"/>
                        <input v-model="username" type="text" placeholder=" 邮箱/用户名/已验证手机" class="user"/>
                    </li>
                    <li>
                        <img src="/login/JD_img/user_06.png" class="err_img2"/>
                        <input v-model="password" type="password" placeholder=" 密码" class="password"/>
                    </li>
                    <li class="bri">
                        <a href="/login/">忘记密码</a>
                    </li>
                    <li class="ent">
                        <button @click="login" class="btn2"><a class="a">登 &nbsp; &nbsp;录</a></button>
                    </li>
                </ul>
            </div>
            <div class="si_out">
                <ul>
                    <li>
                        <a href="/login/#">
                            <img src="/login/JD_img/qq.png"/>
                            <span>QQ</span>
                        </a>
                    </li>
                    <li class="f4"> |</li>
                    <li>
                        <a href="/login/">
                            <img src="/login/JD_img/weixin.png"/>
                            <span>微信</span>
                        </a>
                    </li>
                    <li class="f4"> |</li>
                    <li>
                        <a href="https://api.weibo.com/oauth2/authorize?client_id=238179560&response_type=code&redirect_uri=http://auth.gulimall.com/oauth/weibo/success">
                            <img style="width: 50px; height: 20px" src="/login/JD_img/weibo.png"/>
                        </a>
                    </li>
                </ul>
                <h5 class="rig">
                    <img src="/login/JD_img/4de5019d2404d347897dee637895d02b_25.png"/>
                    <span><a href="/register.html">立即注册</a></span>
                </h5>
            </div>
        </div>
    </div>


    <!--底部-->
    <footer>
        <ul>
            <li><a href="/login/#">关于我们</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">联系我们</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">人才招聘</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">商家入驻</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">广告服务</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">手机谷粒商城</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">友情链接</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">销售联盟</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">谷粒商城社区</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">谷粒商城公益</a></li>
            <li class="little">|</li>
            <li><a href="/login/#">English Site</a></li>
        </ul>
        <span>Copyright &copy; 2004-2017 谷粒商城gulimall.com 版权所有</span>
    </footer>
</div>


</body>
<script type="text/javascript">
    // let alDiv = document.getElementsByClassName('tab');
    // let alBtn = document.getElementsByClassName('btn1');
    // alDiv[0].style.display = 'block';
    // let act = alBtn[0]
    // for (let i = 0; i < alBtn.length; i++) {
    //     alBtn[i].setAttribute('indent',i+'');
    //     console.log('111')
    //     alBtn[i].addEventListener("click",() => {
    //         console.log('hello')
    //         act.className = '';
    //         alDiv[parseInt(act.getAttribute('indent'))].style.display = 'none';
    //         this.className = 'act'
    //         alDiv[parseInt(this.getAttribute('indent'))].style.display = 'block'
    //         act = this
    //     })
    // }
</script>
<script src="/common/axios.js"></script>
<script src="/common/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            show: false
        },
        methods: {
            login() {
                axios({
                    url: '/user/login',
                    method: 'post',
                    data: {
                        username: this.username,
                        password: this.password
                    }
                }).then(({data}) => {
                    if (data.code === 0) {
                        location.href = 'http://gulimall.com'
                    }else {
                        alert("登录失败")
                    }
                })
            }
        },
        created() {
        },
        computed: {}
    })
</script>
</html>
